<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #main {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
      .clock {
        perspective: 400px;
        flex: 0 0 180px;
        position: relative;
        width: 180px;
        height: 300px;
        font-size: 200px;
        margin-left: 20px;
        /* background: linear-gradient(
          0deg,
          #aaa 0% 50%,
          #fff 50% 51%,
          #aaa 51% 100%
        ); */
      }
      .clock-before:before {
        content: ":";
        font-size: 180px;
        margin: -55px;
      }
      .clock .card-item {
        position: absolute;
        width: 100%;
        height: 50%;
        left: 0;
        text-align: center;
        font-size: 180px;
        overflow: hidden;
        backface-visibility: hidden;
        z-index: 1;
        transition: all 0.5s;
        background-color: skyblue;
        border-radius: 20px 20px 0 0;
        margin-right: 15px;
      }
      .clock .card-1 {
        line-height: 300px;
        top: 0;
      }
      .clock .card-2 {
        line-height: 0;
        bottom: 0;
        transform-origin: top center;
        transform: rotateX(180deg);
        border-radius: 0 0 20px 20px;
        z-index: 2;
      }
      .clock .card-3 {
        line-height: 300px;
        top: 0;
        transform-origin: bottom center;
        z-index: 2;
      }
      .clock .card-4 {
        line-height: 0;
        bottom: 0;
        border-radius: 0 0 20px 20px;
      }

      /* .clock:hover .card-2 {
        transform: rotateX(0deg) translateZ(0);
      }
      .clock:hover .card-3 {
        transform: rotateX(-180deg) translateZ(0);
      } */
    </style>
  </head>
  <body>
    <div id="main"></div>
    <!-- <div class="clock clock-before">
      <div class="card-1 card-item">4</div>
      <div class="card-2 card-item">4</div>
      <div class="card-3 card-item">3</div>
      <div class="card-4 card-item">3</div>
    </div> -->
    <script>
      const time = new Date();
      var main = document.getElementById("main");

      // 格式化时间
      function parseTime(time, cformat) {
        const formatObj = {
          y: time.getFullYear(),
          m: time.getMonth() + 1,
          d: time.getDate(),
          h: time.getHours(),
          i: time.getMinutes(),
          s: time.getSeconds(),
        };

        const format = cformat || "{y}-{m}-{d} {h}:{i}:{s}";

        return format.replace(/{([ymdhis])+}/g, (res, key) => {
          let value = formatObj[key];
          if (res.length > 0 && value < 10) {
            value = "0" + value;
          }
          return value;
        });
      }

      let timeStr = parseTime(time, "{h}:{i}:{s}");

      // 创建单个时间折叠卡片
      function createTimeFloder(next_num, num, id, animationFlag) {
        let pos_i = "pos_" + id;

        const clock = document.createElement("div");
        if (id === 3 || id === 6) {
          clock.className = "clock clock-before";
        } else {
          clock.className = "clock";
        }
        clock.innerHTML = `
          :
          <div class="card-1 card-item ${pos_i}">${next_num}</div>
          <div class="card-2 card-item ${pos_i}">${next_num}</div>
          <div class="card-3 card-item ${pos_i}">${num}</div>
          <div class="card-4 card-item ${pos_i}">${num}</div>
        `;
        main.appendChild(clock);

        const card_2 = document.getElementsByClassName(`card-2 ${pos_i}`)[0];
        const card_3 = document.getElementsByClassName(`card-3 ${pos_i}`)[0];

        if (animationFlag) {
          setTimeout(() => {
            card_2.style.setProperty("transform", "rotateX(0deg)");
            card_3.style.setProperty("transform", "rotateX(-180deg)");
          }, 100);
        }
      }

      // 绘制时间
      function drawTime() {
        let time_temp = parseTime(new Date(), "{h}:{i}:{s}");
        if (time_temp !== timeStr) {
          main.innerHTML = "";
          for (let i = 0; i < time_temp.length; i++) {
            if (time_temp[i] === ":") continue;
            // 判断每一位上数字是否发生改变
            if (time_temp[i] !== timeStr[i]) {
              createTimeFloder(time_temp[i], timeStr[i], i, true);
            } else {
              createTimeFloder(time_temp[i], timeStr[i], i, false);
            }
          }
          timeStr = time_temp;
        }

        requestAnimationFrame(drawTime);
      }

      drawTime(timeStr);
    </script>
  </body>
</html>
